<template>
  <el-dialog v-dialog-drag :title="dialogLabel" :visible.sync="visible" width="40%" @close="closeDialog">
    <el-tabs v-model="activeName" @tab-click="tabClick">
      <el-tab-pane label="切换逻辑" name="first">
        <el-form ref="form" :model="dataForm" :rules="rules" label-width="120px">
          <el-form-item label="当前状态" prop="status">
            <el-radio-group v-model="dataForm.status">
              <el-radio :label="1">正常</el-radio>
              <el-radio v-if="!this.isAdd" :label="-1">异常</el-radio>
              <el-radio v-if="!this.isAdd" :label="0">下架</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item v-if="dataForm.status == 1" label="切换逻辑" prop="switch_logic_type">
            <el-checkbox-group v-model="dataForm.switch_logic_type" @change="change">
              <el-checkbox label="recharge">充值区间</el-checkbox>
              <el-checkbox label="whitelist">白名单用户</el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item v-if="dataForm.status == 1" label="充值区间">
            <el-col :span="10">
              <el-form-item prop="min_money">
                <el-input v-model="dataForm.min_money" :min="0"
                          oninput="value = value.replace(/[^\d]/g, '')"
                          placeholder="请输入最小值" style="width: 200px"
                />
                <span>￥</span>
                <span>-</span>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item prop="max_money">
                <el-input v-model="dataForm.max_money" :min="0"
                          oninput="value = value.replace(/[^\d]/g, '')"
                          placeholder="请输入最大值"
                          style="width: 200px"

                />
                <span>￥</span>
              </el-form-item>
            </el-col>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="基础信息" name="second">
        <el-form ref="form2" :model="dataForm2" :rules="rules2" label-width="120px">
          <el-form-item label="商户主体" prop="business">
            <el-select v-model="dataForm2.business" placeholder="请选择商户主体">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="渠道类型" prop="pay_channel">
            <el-radio-group v-model="dataForm2.pay_channel">
              <el-radio :label="0">原生</el-radio>
              <el-radio :label="1">杉德</el-radio>
              <el-radio :label="2">Ada</el-radio>
              <el-radio :label="3">移领</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item v-if="[0,1,2,3].includes(dataForm2.pay_channel)" label="支付渠道" prop="pay_type">
            <el-radio-group v-model="dataForm2.pay_type">
              <el-radio v-show="dataForm2.pay_channel !== 2 || dataForm2.pay_channel === 3" :label="0">微信</el-radio>
              <el-radio v-show="dataForm2.pay_channel !== 3" :label="1">支付宝</el-radio>
              <!-- <el-radio :label="2">微信H5</el-radio> -->
            </el-radio-group>
          </el-form-item>


          <el-form-item label="参数" prop="param">
            <el-input v-model="dataForm2.param" style="width: 400px" type="textarea" :rows="5"></el-input>
          </el-form-item>
        </el-form>

      </el-tab-pane>
    </el-tabs>


    <div class="flex items-center justify-end">
      <el-button type="success" @click="handleToSubmit">确认</el-button>
      <el-button type="info" @click="closeDialog">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>

import request from '../../../utils/request'

const dialogLabels = {
  new: '新增商户',
  edit: '修改商户'
}

const rules2 = {
  business: [
    { required: true, message: '请选择商户主体', trigger: 'change' }
  ],
  pay_channel: [
    { required: true, message: '请填写参数', trigger: 'blur' }
  ],
  pay_type: [
    { required: true, message: '请选择一项', trigger: 'change' }
  ],
  param: [
    { required: true, message: '请输入参数', trigger: 'change' }
  ]
}

const rules = {
  status: [
    { required: true, message: '请选择一项', trigger: 'change' }
  ],
  switch_logic_type: [
    { type: 'array', required: true, message: '请至少选择一个', trigger: 'change' }
  ],
  min_money: [
    { required: true, message: '请输入内容', trigger: 'blur' }
  ],
  max_money: [
    { required: true, message: '请输入内容', trigger: 'blur' }
  ]

}

export default {
  name: 'AddOrEdit',
  data() {
    return {
      isAdd: false,
      // 表单验证
      dataForm: {
        status: 1,
        switch_logic_type: [],
        min_money: '',
        max_money: ''
      },
      // 表单验证2
      dataForm2: {
        business: '',
        pay_channel: '',
        pay_type: '',
        param: ''
      },
      options: [],
      rules,
      rules2,
      activeName: 'first',
      // ------------
      id: 0,
      business_id: 0,
      visible: false,
      dialogLabel: dialogLabels.new

    }
  },
  watch: {
    activeName() {
      this.$forceUpdate()
    }
  },
  async created() {
    const { data } = await request('/merchant/listAll')
    this.options = data
    this.activeName = 'first'
  },
  methods: {
    closeDialog() {
      this.$refs['form'].resetFields()
      this.$refs['form2'].resetFields()
      // this.clearForm()
      this.dataForm = {
        status: '',
        switch_logic_type: [],
        min_money: '',
        max_money: ''
      }
      this.dataForm2 = {
        business_content: '',
        pay_guration: '',
        pay_params: ''
      }
      this.visible = false
    },
    tabClick(tab, event) {
      console.log(tab)
    },
    show(row) {
      this.activeName = 'first'
      if (row) {
        this.isAdd = false

        const {
          status,
          switch_logic_type,
          min_money,
          max_money,
          business,
          pay_channel,
          pay_type,
          param,
          business_id,
          id
        } = row
        this.id = id
        this.business_id = business_id
        this.dataForm.status = status
        this.dataForm.switch_logic_type = switch_logic_type.split(',')
        this.dataForm.min_money = min_money
        this.dataForm.max_money = max_money
        this.dataForm2.pay_type = pay_type === 'wechat' ? 0 : pay_type === 'ali' ? 1 : 2
        this.dataForm2.pay_channel = pay_channel === 'official' ? 0 : pay_channel === 'sand' ? 1 : pay_channel === 'ada' ? 2 : 3
        this.dataForm2.param = param

        this.options.map(item => {
          if (item.name == business.name) {
            this.dataForm2.business = item.id
          }
        })
        this.dialogLabel = dialogLabels.edit
      } else {
        this.isAdd = true
        this.dialogLabel = dialogLabels.new
      }
      this.visible = true
    },

    // close() {
    //   this.visible = false
    //   this.clearForm()
    // },
    change(e) {
      console.log(this.dataForm.switch_logic_type)
    },

    clearForm() {
      // this.$refs['form'].resetFields()
      this.dataForm = {
        status: '',
        switch_logic_type: [],
        min_money: '',
        max_money: ''
      }
      this.dataForm2 = {
        business_content: '',
        pay_guration: '',
        pay_params: ''
      }
    },

    //  提交表单
    async handleToSubmit() {
      if (this.dataForm.max_money <= this.dataForm.min_money) {
        this.$message.error('充值区间最大值小于最小值')
      } else {
        try {
          const [res] = await Promise.all([
            this.$refs['form'].validate(),
            this.$refs['form2'].validate()
          ])
          if (res) {
            let addData
            let editData
            if (this.isAdd) {
              addData = {
                business_id: this.dataForm2.business,
                switch_logic_type: this.dataForm.switch_logic_type,
                min_money: this.dataForm.min_money,
                max_money: this.dataForm.max_money,
                pay_type: this.dataForm2.pay_type == 0 ? 'wechat' : this.dataForm2.pay_type == '1' ? 'ali' : 'wechat_h5',
                pay_channel: this.dataForm2.pay_channel == 0 ? 'official' : this.dataForm2.pay_channel == 1 ? 'sand' : this.dataForm2.pay_channel == 3 ? 'yl' : 'ada',
                param: this.dataForm2.param,
                status: this.dataForm.status,
                id: this.id
              }
              const { code } = await request({
                  method: 'post',
                  url: '/merchant/businessConfig/create',
                  data: addData
                }
              )
              if (code == 200) {
                this.$message.success(this.dialogLabel + '成功！')
                this.$emit('initData')
                this.closeDialog()
              }
            } else {
              if (this.dataForm.status == 1) {
                editData = {
                  business_id: this.dataForm2.business,
                  switch_logic_type: this.dataForm.switch_logic_type,
                  min_money: this.dataForm.min_money,
                  max_money: this.dataForm.max_money,
                  pay_type: this.dataForm2.pay_type == 0 ? 'wechat' : this.dataForm2.pay_type == '1' ? 'ali' : 'wechat_h5',
                  pay_channel: this.dataForm2.pay_channel == 0 ? 'official' : this.dataForm2.pay_channel == 1 ? 'sand' : this.dataForm2.pay_channel == 3 ? 'yl' : 'ada',
                  param: this.dataForm2.param,
                  status: this.dataForm.status,
                  id: this.id
                }
              } else {
                editData = {
                  business_id: this.dataForm2.business,
                  pay_type: this.dataForm2.pay_type == 0 ? 'wechat' : this.dataForm2.pay_type == '1' ? 'ali' : 'wechat_h5',
                  pay_channel: this.dataForm2.pay_channel == 0 ? 'official' : this.dataForm2.pay_channel == 1 ? 'sand' : this.dataForm2.pay_channel == 3 ? 'yl' : 'ada',
                  param: this.dataForm2.param,
                  status: this.dataForm.status,
                  id: this.id
                }
              }
              const { code } = await request({
                  method: 'post',
                  url: '/merchant/businessConfig/update',
                  data: editData
                }
              )
              if (code == 200) {
                this.$message.success(this.dialogLabel + '成功！')
                this.$emit('initData')
                this.closeDialog()
              }
            }
          } else {
            this.$message.warning('请检查填入信息')
          }
        } catch (error) {
          this.$message.error('请检查填写内容')
        }

      }
    }

  }
}
</script>
